import React, { Component } from 'react';
import {
    Flex,
    Icon,
    Modal,
    Carousel,
    WingBlank,
    WhiteSpace,
    Toast,
    Popover
} from 'antd-mobile';
import CanChangeScroll from '../../components/CanChangeScroll/CanChangeScroll';
import Moment from 'moment';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import xing from '../../assets/svg/xing.svg';
import playVideo from '../../assets/svg/playVideo.svg';
import xing2 from '../../assets/svg/xing2.svg';
import share from '../../assets/svg/share.svg';
import share_1 from '../../assets/svg/share_1.svg';
import share_2 from '../../assets/svg/share_2.svg';
import dianzan from '../../assets/svg/dianzan.svg';
import downLoad from '../../assets/svg/downLoad.svg';
import dianzan1 from '../../assets/svg/dianzan1.svg';
import dili from '../../assets/svg/dili.svg';
import pinglun from '../../assets/svg/pinglun.svg';
import {conner_madel,share_madel,evalute_madel} from './findIndex.less';
import { routerRedux } from 'dva/router';
import {wxShare} from "../../utils/weixinShare";
import {IMAGE_DOMAIN, isWechat} from "../../utils/common";

const Item = Popover.Item;

class HotsListItem extends Component {
    constructor(props){
        super(props);
        this.state={
            Visible:false,
            visible:false,
            isShare:false,
            num:0,
            isLike:false,
            jubao:["垃圾营销","有害信息","违法信息","淫秽色情"],
            jubao1:[]
        };

    }
    show  = (i) =>{
        this.setState({
            Visible:true,
            num:i
        })
    }
    Show  = () =>{
        this.setState({
            visible:true,
        })
    };
    onClose=()=>{
        this.setState({
            visible:false,
        })
    }
    like=()=>{
        this.props.dispatch({type:"findOthers/connerLikeEFF",obj:{id:this.props.v.trendsId  }}).then(result=>{
            if(result.code==200){
                Toast.success(result.msg,1.5,()=>{
                    return this.props.Refresh();
                })
            }
        })
    }
    decodeUnicode=(str)=> {
        str = str.replace(/\\/g, "%");
        return unescape(str);
    }
    formatDate=(time,createTime)=>{
        var date = new Date(createTime);
        var newTime="";
        var year = date.getFullYear(),
            month = date.getMonth() + 1,//月份是从0开始的
            day = date.getDate(),
            hour = date.getHours(),
            min = date.getMinutes(),
            sec = date.getSeconds();
        if(parseInt(time/1000)<60){
            newTime = "刚刚";
        }else if(parseInt(time/1000) >= 60 && parseInt(time/1000) <= 3600){
            newTime = parseInt(parseInt(time/1000)/60)+"分钟前"
        }else if((parseInt(time/1000) > 3600 && parseInt(time/1000) <= 3600*24)){
            newTime = parseInt(parseInt(time/1000)/3600)+"小时前"
        }else if(parseInt(time/1000) > 3600*24&&parseInt(time/1000) <= 3600*24*7){
            newTime = parseInt(parseInt(time/1000)/ (24*3600))+"天前"
        }else{
            newTime = year + '-' +
                month + '-' +
                day + ' ' +
                hour + ':' +
                min + ':' +
                sec;
        }

        return newTime;
    }
    goDetail=()=>{
        //this.props.dispatch({ type: 'findOthers/save', data: { findDetail: this.props.v}})
        this.props.dispatch(routerRedux.push({
            pathname:`/findDetail/${this.props.v.trendsId}/${0}`
        }))
    }
    render () {
        const { v, dispatch } = this.props;
        let { Visible,isShare, num,visible,jubao,jubao1} = this.state;
        return (
            <div  style={{background:"#fff",marginTop:".2rem"}}>
                <WingBlank>
                    <WhiteSpace></WhiteSpace>
                    <Flex justify={v.isMe==0?"between":""}>
                        <Flex>
                            <NoLazyImg onClick={()=>{
                                if (parseInt(v.isMe)==1){
                                 this.props.dispatch(routerRedux.push({
                                        pathname:`/personHome/${-1}`
                                    }))
                                }else {
                                 this.props.dispatch(routerRedux.push({
                                        pathname:`/personHome/${v.memberId}/${0}`
                                    }))
                                }
                            }} src={v.head!=undefined?v.head:""}  style={{borderRadius:"100%",width:".7rem",height:".7rem",marginRight:".2rem"}}></NoLazyImg>
                            <div onClick={this.goDetail}>
                                <div style={{marginBottom:".1rem",fontSize:".3rem"}}>{v.memberName }</div>
                                <div style={{ color:"#999",fontSize:".22rem" }}>{this.formatDate(this.props.nowTime-v.createTime,v.createTime)}发布</div>
                            </div>
                        </Flex>
                        {v.isMe==0? <Flex justify="end">
                            {v.isConcern==0? <div style={{color:"#ff0036",border:"1px solid #ff0036",borderRadius:".4rem",padding:".1rem .4rem",marginRight:".2rem"}} onClick={()=>{
                                this.props.dispatch({type:"findOthers/connerFollowEFF",obj:{connerId:v.memberId   }}).then(result=>{
                                    if(result.code==200){
                                        Toast.success(result.msg,1.5,()=>{
                                            this.props.Refresh();
                                        })
                                    }
                                })
                            }}>关注</div>:""}
                            <Icon type="cross" style={{width:".44rem",height:".44rem"}} onClick={this.Show}></Icon>
                        </Flex>:""}
                    </Flex>
                    {v.topicName!=""?<Flex wrap="wrap" onClick={this.goDetail} style={{margin:".2rem 0",fontSize:".3rem"}} >
                        {v.trendsType=="article"?<div style={{margin:".1rem 0",width:"100%"}}>{v.articleTitle }</div>:""}
                        {v.topicName.split(",").map((va,ia)=>{
                            return <span style={{color:"#ff0036",marginRight:".1rem",marginBottom:".1rem"}} onClick={(e)=>{
                                if(this.props.topic&&this.props.topic===this.decodeUnicode(va)){
                                    return false
                                }else{
                                    e.stopPropagation();
                                    this.props.dispatch(routerRedux.push({
                                        pathname:`/topicPage/${this.decodeUnicode(va)}`
                                    }))
                                }

                            }} key={ia}>
                                                #{this.decodeUnicode(va)}#
                                            </span>
                        }) }
                        {v.trendsType=="picture"||v.trendsType=="video"?<div>{v.content.length<=50?v.content:v.content.slice(0,50)+"..."}</div>:JSON.parse(v.articleContent).map((a,b)=>{
                            if(a.type=="str"&&b<=2){
                                return <div key={b} style={{marginBottom:".1rem"}}>
                                    {a.content.slice(0,21)}
                                </div>
                            }
                        })  }
                    </Flex>:<div  onClick={this.goDetail} style={{margin:".2rem 0",fontSize:".3rem"}} >
                        {v.trendsType=="article"?<div style={{margin:".1rem 0",width:"100%"}}>{v.articleTitle }</div>:""}
                        {v.trendsType=="picture"||v.trendsType=="video"?<div>{v.content.length<=50?v.content:v.content.slice(0,50)+"..."}</div>:JSON.parse(v.articleContent).map((a,b)=>{
                            if(a.type=="str"&&b<=2){
                                return <div key={b} style={{marginBottom:".1rem"}}>
                                    {a.content.slice(0,21)}
                                </div>
                            }
                        })  }
                    </div>}
                    {v.trendsType=="picture"?v.pictures==""?"":v.pictures.split(",").length==1?v.pictures.split(",").map((vv,ii)=>{
                        return <NoLazyImg src={vv} key={ii} onClick={ ()=>{ this.show(ii) } } style={{width:"5rem",height:"4rem"}}/>

                    }): <Flex wrap="wrap">{v.pictures.split(",").map((vv,ii)=>{
                        return <div key={ii} style={{width:"32%",margin:"0 .1rem .1rem 0",textAlign:"center"}}>
                            <NoLazyImg src={vv!=undefined?vv:""} onClick={ ()=>{ this.show(ii) } }  style={{width:"2.3rem",height:"2.3rem"}}/>
                        </div>
                    })}</Flex>:""}
                    {v.trendsType=="article"?<NoLazyImg src={v.cover !=undefined?v.cover :""} onClick={this.goDetail} style={{width:"100%",height:"4rem"}}></NoLazyImg>:""}
                    {v.trendsType=="video"?
                        <div onClick={this.goDetail} style={{position:"relative"}}>
                            <Icon type={playVideo.id} style={{position:"absolute",top:"40%",left:"45%",width:"1rem",height:"1rem"}}></Icon>
                            <NoLazyImg  src={v.firstImage  !=undefined?v.firstImage  :""}  style={{width:"100%",height:"4rem"}}/>
                            <div style={{position:"absolute",right:".3rem",bottom:".3rem",color:"#fff"}}>{v.videosSize}</div>
                        </div>:""}
                    <Flex justify="between" style={{padding:".2rem 0",borderBottom:"1px solid #e5e5e5"}}>
                        <div>{v.views>=10000?v.views/10000+"万 浏览":v.views+" 浏览" }</div>
                        {v.location ?<Flex>
                            <Icon type={dili.id} style={{marginRight:".1rem"}}></Icon>
                            <span>{v.location.slice(0,16) }</span>
                        </Flex>:""}
                    </Flex>
                    <Flex justify="between" style={{marginTop:".2rem"}}>
                        {v.isPoint ==0? <Flex >
                            <Icon type={dianzan.id} style={{width:".44rem",height:".44rem"}} onClick={this.like}/>
                            <span style={{color:"#999"}}>{+v.point  || <span >点赞</span> }</span>
                        </Flex>:<Flex >
                            <Icon type={dianzan1.id} style={{width:".44rem",height:".44rem"}} onClick={this.like}/>
                            <span style={{color:"#ff0036"}}>{+v.point  || <span >点赞</span> }</span>
                        </Flex>}
                        <Flex>
                            <Icon type={pinglun.id} style={{width:".44rem",height:".44rem"}} onClick={()=>{
                                this.props.dispatch({ type: 'findOthers/save', data: { findDetail: v}})
                                this.props.dispatch(routerRedux.push({
                                    pathname:`/findDetail/${v.trendsId}/${1}`
                                }))
                            }}/>
                            <span style={{color:"#999", marginLeft: '.05rem'}}>{+v.comment  || <span>评论</span> }</span>
                        </Flex>
                        {/*{isWechat()? <Flex>*/}
                            {/*<Icon type={share.id} style={{color:"#999",width:".44rem",height:".44rem"}} onClick={()=>{*/}
                                {/*this.props.dispatch(routerRedux.push({*/}
                                    {/*pathname:`/findDetail/${this.props.v.trendsId}/${0}?show=${1}`*/}
                                {/*}))*/}
                            {/*}}/>*/}
                        {/*</Flex>:""}*/}
                    </Flex>
                    <WhiteSpace></WhiteSpace>
                </WingBlank>
                <Modal
                    visible={Visible}
                    transparent
                    maskClosable={false}
                    className={evalute_madel}
                    //onClose={this.onClose('modal1')}
                    //title="Title"
                    // footer={[{ text: 'Ok', onPress: () => { console.log('ok'); this.onClose('modal1')(); } }]}
                    // wrapProps={{ onTouchStart: this.onWrapTouchStart }}
                >
                    <div style={{ height:"100%" }}>
                        <Flex className="title" justify="between">
                            <div
                                onClick={()=>{ this.setState({
                                    Visible:false
                                }) }}
                                style={{width:"33%"}}
                            >
                                <Icon type="left" style={{width:".44rem",height:".44rem"}}/>
                            </div>
                            <div style={{width:"33%",textAlign:"center",}}>
                                {num+1}/{v.pictures.split(",").length}
                            </div>
                            <div style={{width:"33%",textAlign:"center"}}>
                                <a href={IMAGE_DOMAIN+v.pictures.split(",")[num]} download="img">
                                    <Icon type={downLoad.id} style={{width:".44rem",height:".44rem",color:"#999",marginTop:".3rem"}}/>
                                </a>
                            </div>
                        </Flex>

                        <Flex className="ev_carousel">
                            <Carousel
                                //key={this.state.num}
                                //  className={index_banner}
                                selectedIndex={num}
                                //autoplay={data.length != 1}
                                autoplay={false}
                                afterChange={(n)=>{
                                    this.setState({
                                        num:n
                                    })
                                }}
                                infinite
                                dots={false}
                                // resetAutoplay={true}
                            >
                                {
                                    v.pictures.split(",").map((item, index) => (
                                        <div key={index} style={{height:"auto",textAlign:"center"}}>
                                            <NoLazyImg
                                                onLoad={
                                                    ()=>{
                                                        window.dispatchEvent(new Event('resize'));
                                                    }
                                                }
                                                onClick={()=>{ this.setState({
                                                    Visible:false
                                                }) }}
                                                style={{ width:"60%", height:"100%" }}
                                                src={item}
                                            />
                                        </div>
                                    ))
                                }
                            </Carousel>
                        </Flex>
                    </div>

                </Modal>
                <Modal
                    visible={visible}
                    transparent
                    // closable={true}
                    className={conner_madel}
                    onClose={this.onClose}
                    footer={[{ text: '立即举报', onPress: () => { this.props.dispatch({type:"findOthers/connerFollowEFF",obj:{resonText:jubao1.join(","),trendsId:v.trendsId   }}).then(result=>{
                            if(result.code==200){
                                Toast.success(result.msg,1.5,()=>{
                                    this.onClose();
                                    this.props.Refresh();
                                })
                            }
                        }) } }]}
                >
                    {v.isConcern==1? <Flex justify="between">
                        <div>您已关注该用户</div>
                        <div style={{color:"#fff",background:"#ff0036",borderRadius:".1rem",padding:".1rem"}} onClick={()=>{
                            this.props.dispatch({type:"findOthers/connerFollowEFF",obj:{connerId:v.concernId   }}).then(result=>{
                                if(result.code==200){
                                    Toast.success(result.msg,1.5,()=>{
                                        this.onClose();
                                        this.props.Refresh();
                                    })
                                }
                            })
                        }}>取消关注</div>
                    </Flex>:""}
                    <div style={{textAlign:"left",fontSize:".3rem"}}>
                        举报
                    </div>
                    <Flex justify="between" wrap="wrap" style={{marginTop:".2rem"}}>
                        {jubao.map((vv,ii)=>{
                            return <div className="jubao" key={ii} onClick={(e)=>{
                                let isHave = e.target.getAttribute("class").includes('jubao1');
                                if(isHave){
                                    e.target.setAttribute("class","jubao" );
                                    this.state.jubao1 = this.state.jubao1.filter((x)=>{
                                        return x!==vv;
                                    })
                                }else{
                                    e.target.setAttribute("class","jubao jubao1" );
                                    this.state.jubao1.push(vv);
                                }
                                this.setState({
                                    jubao1:this.state.jubao1
                                })
                            }}>{vv}</div>
                        })}
                    </Flex>
                </Modal>
                <Modal
                    popup
                    visible={isShare}
                    animationType="slide-up"
                    maskClosable={true}
                    className={share_madel}
                    onClose={() => { this.setState({ isShare: false }); }}
                >
                    <Flex justify="between" className="share_icon">
                        <Icon type={share_1.id} style={{color:"#999",width:"1.2rem",height:"1.2rem"}} onClick={()=>{
                                 wxShare(v.shareAddress,v.sharePictures);
                                 //alert('share_1')
                            }}/>
                        <Icon type={share_2.id} style={{ color:"#999",width:"1.2rem",height:"1.2rem"}} onClick={()=>{
                                  wxShare(v.shareAddress,v.sharePictures);
                                  //alert('share_2')

                            }}/>
                    </Flex>
                    <div className="btn" onClick={() => {
                                this.setState({ isShare: false })
                    }}>取消</div>
                </Modal>
            </div>
        );
    }
}

export default HotsListItem;